<template>
    <div class="login">
        <div class="boxClass">
                <el-row>
                    <el-col :span="18" :offset="3">
                        <div class="titlediv">欢迎注册</div>
                    </el-col>
                </el-row>
                <el-row class="userinput">
                    <el-col :span="18" :offset="3">
                        <el-input placeholder="请输入用户名" prefix-icon="el-icon-user" v-model="user.name"
                                   ref="usernameInput"  maxlength="20" clearable></el-input>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="18" :offset="3">
                        <el-input type="email" placeholder="请输入邮箱地址" prefix-icon="el-icon-message" v-model="user.email" clearable>
                            <el-button :loading="isCountDown" slot="append" icon="el-icon-thumb" @click="getCode"><span v-if="!isCountDown">获取验证码</span><span v-if="isCountDown">{{countDownNum}}s后重新获取</span></el-button>
                        </el-input>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="18" :offset="3">
                        <el-input maxlength="6" placeholder="请输入验证码" prefix-icon="el-icon-tickets" v-model="user.code"
                                  ref="passwordInput" clearable></el-input>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="18" :offset="3">
                        <el-input placeholder="请输入密码" prefix-icon="el-icon-lock" v-model="user.password"
                                   ref="passwordInput" maxlength="20"  show-password clearable></el-input>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="18" :offset="3">
                        <el-input placeholder="请重复密码" prefix-icon="el-icon-lock" v-model="user.repassword"
                                   ref="repasswordInput" maxlength="20" show-password clearable></el-input>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10" :offset="7">
                        <el-button icon="el-icon-s-claim" class="loginbut" type="primary" @click="register">注册</el-button>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="5" :offset="16">
                        <el-link type="primary" class="toRegist"  @click="toLogin">已有帐号？登录</el-link>
                    </el-col>
                </el-row>

        </div>
    </div>
</template>

<script>
    export default {
        name: "Register",
        data(){
            return{
                user:{
                    name:'',
                    password:'',
                    repassword: '',
                    email: '',
                    code: ''
                },
                isCountDown:false,
                countDownNum:30
            }
        },
        mounted:function(){
            this.$refs.usernameInput.focus();
        },
        methods:{
            //注册
            register(){
                if (this.user.name.length <= 0) {
                    this.$message.error("请输入用户名");
                    return false;
                }
                if (this.user.email.length <= 0) {
                    this.$message.error("请输入邮箱");
                    return false;
                }
                if (this.user.password.length <= 0) {
                    this.$message.error("请输入密码");
                    return false;
                }
                if (this.user.password != this.user.repassword) {
                    this.$message.error("两次密码输入不一致");
                    return false;
                }
                let _this = this;
                _this.$axios({
                    url: "auth/register",
                    method: "POST",
                    headers:{
                        'Content-Type': 'application/json'
                    },
                    data: JSON.stringify(_this.user)
                })
                .then(function (res) {
                    let result= res.data;
                    if (result.status == 200) {
                        _this.$message.success(result.message);
                    }else if (result.status == 500) {
                        _this.$message.error(result.message);
                    }
                })
                .catch(function (res) {
                    console.log("出现错误"+res);
                })
            },
            //跳转注册页面
            toLogin() {
                this.$router.push({name:'Login'})
            },
            //获取验证码
            getCode() {
                let _this = this;
                //验证邮箱
                var reg=/^[\S]+@[\S]+.[\S]+$/;
                if (!reg.test(_this.user.email)) {
                    _this.$message.error("邮箱格式不正确");
                    return false;
                }
                _this.$axios({
                    url: "auth/verificationcode",
                    method: "GET",
                    params: {email:_this.user.email}
                })
                .then(function (res) {
                    let result= res.data;
                    if (result.status == 200) {
                        _this.disableButtonCode();
                        _this.$message.success(result.message);
                    }else {
                        _this.$message.error(result.message);
                    }
                })
                .catch(function (res) {
                    console.log("出现错误"+res);
                });
            },
            /**
             * 获取验证码成功后禁用按钮
             */
            disableButtonCode() {
                let _this = this;
                _this.isCountDown = true;
                _this.timer=setInterval(() => {
                    _this.countDownNum--;
                    if(this.countDownNum<=0){
                        clearInterval(this.timer);
                        _this.countDownNum = 30;
                        _this.isCountDown = false;
                    }
                },1000);
            }
        }
    }
</script>

<style scoped>
    .login {
        width: 100%;
        height: 100%;
        position: fixed;
        background-color: #e2e7bf;
        background-image: url("../assets/touming.png");
    }
.boxClass {
    width: 37%;
    margin: 120px auto;
    background-color: rgba(255,255,255,0.2);
    border-radius: 30px;
}
    .el-row {
        text-align: center;
        margin-bottom: 20px;
    }
    .userinput{
        margin-top: 50px;
    }
    .loginbut{
        width: 100%;
        height: 100%;
    }
    .titlediv{
        width: 100%;
        height: 100%;
        color: #2b312c;
        font-size: 25px;
        margin-top: 20px;
        font-weight: 600;
    }
    .toRegist{
        font-size: 14.5px;
    }
</style>